<!--
  文件描述：
  创建时间：2023/9/20 10:19
  创建人：二
-->
<template>
  <el-table-column v-bind="columnsHeader">
    <!-- 表头插槽 -->
    <template
      v-if="columnsHeader['slotHeaderName']"
      v-slot:header="{ $index, column}">
      <slot
        :name="columnsHeader['slotHeaderName']"
        :$index="$index"
        :column="column"
      >
      </slot>
    </template>
    <template v-for="(item) in columnsHeader.children">
      <MTableColumn
        v-if="item.children && item.children.length"
        :key="item.prop || item.type"
        :columns-header="item">

        <template v-for="(value, name) in $slots" #[name]>
          <slot :name="name" />
        </template>

        <template v-for="(value, name) in $scopedSlots" #[name]="{row, $index, column, isExpanded, isSelected, store, _self}">
          <slot
            :name="name"
            :row="row"
            :$index="$index"
            :column="column"
            :isExpanded="isExpanded"
            :isSelected="isSelected"
            :store="store"
            :_self="_self"
          />
        </template>

      </MTableColumn>

      <el-table-column
        v-else
        :key="item.prop || item.type"
        v-bind="item"
        :header-align="headerAlign(item.headerAlign)"
        show-overflow-tooltip>
        <!-- 表头插槽 -->
        <template
          v-if="item['slotHeaderName']"
          v-slot:header="{ $index, column}">
          <slot
            :name="item['slotHeaderName']"
            :$index="$index"
            :column="column"
          >
          </slot>
        </template>

        <template
          v-if="item.slotName"
          v-slot="{row, $index, column, isExpanded, isSelected, store, _self}">
          <slot
            v-bind:name="item.slotName"
            :row="row"
            :$index="$index"
            :column="column"
            :isExpanded="isExpanded"
            :isSelected="isSelected"
            :store="store"
            :_self="_self"
          >
          </slot>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'MTableColumn',
  props: {
    // 列配置
    columnsHeader: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    // 表头对齐方式
    headerAlign(val) {
      let arr = ['left', 'center', 'right']
      return arr.includes(val) ? val : 'center'
    }
  }
}
</script>

<style scoped>

</style>
